<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OCR识别</title>
    <style>
        table {
            border-collapse: collapse; /* 合并边框 */
            border: 2px solid black;   /* 设置表格边框 */
        }
        th, td {
            border: 2px solid black; /* 设置单元格边框 */
            padding: 5px;            /* 单元格内边距 */
        }
    </style>
    <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" >
        function get(){
            // var data = [
            //     {
            //         purchaseDate: "4.17",
            //         orderNum: "5",
            //         commonName: "玉米",
            //         sampleFrom: "太康",
            //         sampleCode: "3239271",
            //         colorAndSmell: "",
            //         oneTime: "",
            //         twoTime: "",
            //         values: "14.38",
            //         bulkDensity: "756",
            //         sampleAllWeight: "857",
            //         miscWeight: "2"
            //     },
            //     {
            //         purchaseDate: "",
            //         orderNum: "6",
            //         commonName: "玉米",
            //         sampleFrom: "太康",
            //         sampleCode: "3239592",
            //         colorAndSmell: "",
            //         oneTime: "",
            //         twoTime: "",
            //         values: "13.58",
            //         bulkDensity: "751",
            //         sampleAllWeight: "664",
            //         miscWeight: ""
            //     }
            // ];

            $.ajax({
                url: 'http://localhost:8081/ocr/demo',
                type: 'POST',
                cache: false,
                data: new FormData($('#uploadForm')[0]),
                processData: false,
                contentType: false,
                success: function (data) {
                    // console.log(data)
                    // alert(data.msg);
                    setTable(data);
                }
            }).fail(function (res) {
                console.log(res)
                alert(res)
            });

        }

        function setTable(data){
            var tbody = table.getElementsByTagName("tbody")[0];
            for (var i = 0; i < data.length; i++) {
                var tr = document.createElement("tr");
                var td1 = document.createElement("td");
                var td2 = document.createElement("td");
                var td3 = document.createElement("td");
                var td4 = document.createElement("td");
                var td5 = document.createElement("td");
                var td6 = document.createElement("td");
                var td7 = document.createElement("td");
                var td8 = document.createElement("td");
                var td9 = document.createElement("td");
                var td10 = document.createElement("td");
                var td11 = document.createElement("td");
                var td12 = document.createElement("td");
                td1.innerHTML = data[i].purchaseDate;
                td2.innerHTML = data[i].orderNum;
                td3.innerHTML = data[i].commonName;
                td4.innerHTML = data[i].sampleFrom;
                td5.innerHTML = data[i].sampleCode;
                td6.innerHTML = data[i].colorAndSmell;
                td7.innerHTML = data[i].oneTime;
                td8.innerHTML = data[i].twoTime;
                td9.innerHTML = data[i].values;
                td10.innerHTML = data[i].bulkDensity;
                td11.innerHTML = data[i].sampleAllWeight;
                td12.innerHTML = data[i].miscWeight;
                tr.appendChild(td1);
                tr.appendChild(td2);
                tr.appendChild(td3);
                tr.appendChild(td4);
                tr.appendChild(td5);
                tr.appendChild(td6);
                tr.appendChild(td7);
                tr.appendChild(td8);
                tr.appendChild(td9);
                tr.appendChild(td10);
                tr.appendChild(td11);
                tr.appendChild(td12);
                tbody.appendChild(tr);tbody.appendChild(tr);
            }
        }

    </script>
</head>
<body>

<div>
    <form id="uploadForm" enctype="multipart/form-data">
        <input id="file" type="file" name="file"/>
        <button id="upload" type="button">upload</button>
        <input type="button" value="get" onclick="get()">
    </form>

<!--    <form action="http://localhost:8081/ocr/demo" method="post" enctype="multipart/form-data">-->
<!--        <input type="file" name="file">-->
<!--        <input type="submit" value="submit">-->
<!--        <input type="button" value="get" onclick="get()">-->
<!--    </form>-->

</div>

<div id="table">
    <table style="border: 1px solid #000000">
        <thead>
        <tr>
            <th rowspan="3">进货日期</th>
            <th rowspan="3">序号</th>
            <th colspan="3">物料</th>
            <th colspan="7">检测结果</th>
        </tr>
        <tr>
            <th rowspan="2">通用名称</th>
            <th rowspan="2">样品来源</th>
            <th rowspan="2">样品编号</th>
            <th rowspan="2">颜色气味</th>
            <th colspan="3">水分</th>
            <th rowspan="2">容重</th>
            <th colspan="3">杂志</th>
        </tr>
        <tr>
            <th>1次</th>
            <th>2次</th>
            <th>取值</th>
            <th>样品总重</th>
            <th>杂重</th>
        </tr>
        </thead>
        <tbody>
<!--        <tr>-->
<!--            <td>1</td>-->
<!--            <td>张三</td>-->
<!--            <td>18</td>-->
<!--        </tr>-->
<!--        <tr>-->
<!--            <td>2</td>-->
<!--            <td>李四</td>-->
<!--            <td>19</td>-->
<!--        </tr>-->
        </tbody>

    </table>
</div>

</body>
</html>